<template>
  <div>
    <el-button type="text" :disabled="canUseLibs" @click="showDialog()">从素材库选择</el-button>
    <el-dialog title="添加工作台/应用" :visible.sync="dialogVisible" append-to-body width="868px"
      custom-class="materiaLibrary" @opened="openCallBack">
      <span slot="title">素材选择
        <template v-if="isDev">
          {{ "tabComp:"+typeof(tabComp)+":"+tabComp }}
          {{ "tabLibs:"+typeof(tabLibs)+":"+tabLibs }}
          {{ "pid:"+pid+";aid:"+aid+";ceid:"+ceid }}
        </template>
      </span>
      <div class="dis-flex flex-sbc">
        <div class="tabRow">
          <button :class="['btn','tabItem',(tabComp == 1)?'active':'']"
            type="button" @click="switchTab(1,null)">公司素材库</button>
          <button :class="['btn','tabItem',(tabComp == 0)?'active':'']"
            type="button" @click="switchTab(0,null)">个人素材库</button>
        </div>
        <el-link type="primary" :href="libsHref" target="_blank" style="margin-right:24px;">
          <i class="fa fa-fw fa-cube"></i>素材库管理
          <template v-if="isDev">{{libsHref}}</template>
        </el-link>
      </div>
      <div class="tabRow">
        <template v-for="(v,k) in tools">
          <template v-if="k!=0">
            <button :class="['btn','tabItem',v.isActive?'active':'']" :key="k"
              type="button" @click="switchTab(null,k)">{{v.txt}}</button>
          </template>
        </template>
      </div>
      <div class="main">
        <el-row>
          <el-col :span="12" :offset="6">
            <el-input placeholder="请输入内容" v-model="keyWord" clearable>
              <template slot="append">
                <el-button type="primary" class="btn-search" @click="getData()">搜索</el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-empty v-if="libsList.length == 0" :description="emptyDescription"></el-empty>
        <template v-if="libsList.length > 0">
          <template v-if="tabLibs == 1">
            <ul class="listText">
              <li v-for="(v,i) in libsList" :key="'t_'+i" @click="activeItem(v)"
                :class="{'item':true,'active':v.id == cacheItem.id}">
                <div class="time">{{$moment(v.addTime).format('yyyy-M-D')}}</div>
                <div class="text-overflow">{{v.title}}</div>
              </li>
            </ul>
          </template>
          <template v-if="tabLibs == 2">
            <div class="listMpnews">
              <el-row :gutter="8">
                <el-col :span="8" v-for="(v,i) in libsList" :key="'w_'+i">
                  <el-card :body-style="{ padding: '0px' }"
                    :class="{'item':true,'active':v.id == cacheItem.id}">
                    <div class="img-box" @click="activeItem(v)">
                      <img class="img-cover" :src="v.imgUrl">
                    </div>
                    <div class="title text-overflow" @click="activeItem(v)">{{v.title}}</div>
                    <div class="content" @click="activeItem(v)">{{v.body}}</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-if="tabLibs == 3">
            <div class="listImage">
              <el-row :gutter="8">
                <el-col :span="4" v-for="(v,i) in libsList" :key="'w_'+i">
                  <el-card :body-style="{ padding: '0px' }"
                    :class="{'item':true,'active':v.id == cacheItem.id}">
                    <div class="img-box" @click="activeItem(v)">
                      <img class="img-cover" :src="v.imgUrl">
                    </div>
                    <div class="title text-overflow" @click="activeItem(v)">{{v.title}}</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-if="tabLibs == 4">
            <div class="listVideo">
              <el-row :gutter="8">
                <el-col :span="8" v-for="(v,i) in libsList" :key="'w_'+i">
                  <el-card :body-style="{ padding: '0px' }"
                    :class="{'item':true,'active':v.id == cacheItem.id}">
                    <div class="img-box" @click="activeItem(v)">
                      <!-- <img class="img-cover" :src="v.imgUrl"> -->
											<video :src="v.videoUrl" class="img-cover"></video>
                    </div>
                    <div class="title text-overflow" @click="activeItem(v)">{{v.title}}</div>
                    <div class="content" @click="activeItem(v)">{{v.body + v.body + v.body + v.body}}</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-if="tabLibs == 5">
            <ul class="listFile">
              <li v-for="(v,i) in libsList" :key="'t_'+i" @click="activeItem(v)"
                :class="{'item':true,'active':v.id == cacheItem.id}">
                <div class="time">{{$moment(v.addTime).format('yyyy-M-D')}}</div>
                <div class="size"><Size :size="Number(v.size)"></Size></div>
                <div class="text-overflow">{{v.title}}</div>
              </li>
            </ul>
          </template>
        </template>
        <div class="dis-flex flex-sbc dialogFooter">
          <div class="flex-atLeft">
            <el-pagination layout="prev,slot,next" :total="pagination.total" :page-size='pagination.size' @current-change="getData">
              <span class="suffix">
                {{ pagination.current }} /
                {{ Math.ceil(pagination.total / pagination.size) }}
              </span>
            </el-pagination>
          </div>
          <template v-if="isDev">{{ JSON.stringify(pagination) }}</template>
          <div class="flex-atRight">
            <el-button type="primary" :disabled="!cacheItem.id" @click="confirm()">确定</el-button>
            <el-button @click="cancel()">取消</el-button>
          </div>
        </div><!--dialogFooter+pagination-->
      </div><!--main-->
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { resJson2vueList } from './resJson2vueList.js';//处理服务端返回数据的方法

export default {
  components:{
    'Size':()=>{return import('./../../components/FileSize.vue')},//计算文件大小的组件
  },
  computed:{
    ...mapState(['','',]),
    tabLibs:function(){
      let idx = this.tools.findIndex((v,i)=>{return v.isActive});
      return idx
    },
    pagination:function(){
      if(this.tabLibs == 1){return this.pageText;}
      if(this.tabLibs == 2){return this.pageMpnews;}
      if(this.tabLibs == 3){return this.pageImage;}
      if(this.tabLibs == 4){return this.pageVideo;}
      if(this.tabLibs == 5){return this.pageFile;}
    },//根据类型使用不同的分页计算
    libsHref:function(){
      let host = this.isDev?`http://112.111.19.224`:``;
      let port = this.isDev?`:9999`:``;
      let path = this.isDev?`Html/xiangmu/webNativeHtmlV2/CRMV2/materialLibraryManagement`:`imMaterialLibrary`;
      let ceid = this.ceid
      let type = (this.tabComp == '1')?'company':'personal';
      return `${host}${port}/${path}/#/writtenWords?materialType=${type}&companyEmployeeId=${ceid}`
    },
  },
  props:{
    pid:{type:[String,Number],default:0},//平台id,由父级传入规避$store的污染
    aid:{type:[String,Number],default:0},//应用id,由父级传入规避$store的污染
    ceid:{type:[String,Number],default:0},//员工id,由父级传入规避$store的污染

    canUseLibs:{type:Boolean,default:false,},//能不能点击素材库,由父级传入
    tools:Array,  //可用工具组
  },
  data(){
    return {
      isDev:process.env.NODE_ENV== 'development',
      
      dialogVisible:false,
      
      tabComp:1,//指示tab 公司1私人0
      keyWord:'',//搜索用关键字
      libsList:[],
      
      pageText:   {current:1,total:0,size:10},
      pageMpnews: {current:1,total:0,size:6},
      pageImage:  {current:1,total:0,size:18},
      pageVideo:  {current:1,total:0,size:6},
      pageFile:   {current:1,total:0,size:10},
      emptyDescription:'暂无数据',//数据异常提示文本
      cacheItem:{},//缓存对象
    }
  },
  methods:{
    openCallBack(){this.getData(1);},//打开的回调
    cancel(){this.dialogVisible = false;},//取消的回调
    confirm(){//
      let cacheArg = {
        nCompType:this.cacheItem.nCompType,
        nLibsType:this.cacheItem.nLibsType,
        idValue:this.cacheItem.id,
      }
      this.dialogVisible = false;
      this.$emit('getMaterialObject',cacheArg)
    },//选定确认,将缓存对象的idx提交给父组件,用父组件调用接口自行处理
    switchTab(idxComp,idxLibs){
      if( idxComp != null ){this.tabComp = idxComp}
      if( idxLibs != null ){
        this.$emit('switchTab',idxLibs)
      }
      this.setPagination(1,0);
      this.getData();
    },//tab切换的结果提交父级处理,父级回传渲染
    setPagination(current,total){
      if(this.tabLibs ==  "1"){
        this.pageText.current = current;
        this.pageText.total = total;
      }
      if(this.tabLibs ==  "2"){
        this.pageMpnews.current = current;
        this.pageMpnews.total = total;
      }
      if(this.tabLibs ==  "3"){
        this.pageImage.current = current;
        this.pageImage.total = total;
      }
      if(this.tabLibs ==  "4"){
        this.pageVideo.current = current;
        this.pageVideo.total = total;
      }
      if(this.tabLibs ==  "5"){
        this.pageFile.current = current;
        this.pageFile.total = total;
      }
      //切换tab时传1,0,初始化1页总数0,等请求数据回填
      //请求后传入可用值
    },//处理不同的分页器
    showDialog(){
      let iniIdx = this.tools.findIndex((v)=>{return v.isActive});
      //这里是个补丁,检查工具是否是emoji
      if(iniIdx <= 0){
        this.$emit('switchTab',1);
      }
      this.dialogVisible = true;
    },//展开对话框
    getData(e){
      // console.log(e)
      if(e != undefined){
        this.pagination.current = e
      }

      if(!this.dialogVisible){return};//如果弹窗没显示就算了
      this.$set(this,'cacheItem',{});//获取新的数据前先清空缓存对象
      let isComp = Boolean();// 1:公司0:私人
      let arg1 = Object.assign(
        Boolean(this.tabComp) ? {} : {companyEmployeeId:this.ceid},//平台id
        {agentid:this.aid},//应用id
        {eSCompanyId:this.pid},//员工id
        {keyWord:this.keyWord,},//关键词
        {
          pageIndex:this.pagination.current,
          pageSize:this.pagination.size,
        },//页
      );//接口用常规参数
      let arg2 = {
        nCompType: this.tabComp,
        nLibsType: this.tabLibs,
      };//接口分类修改参数
      this.$api.getMaterialByPage(arg1,arg2).then((res)=>{
        this.libsList.splice(0,this.libsList.length);//清空当前列表
        if(res.data.code == 200){
          for(let i in res.data.data.list){
            let item = resJson2vueList( arg2.nLibsType, res.data.data.list[i] );
            this.libsList.push(item)
          }
          this.setPagination( arg1.pageIndex , res.data.data.count )
        }else{
          this.emptyDescription = res.data.message;
        }
      })
    },//发起请求获取素材列表
    activeItem(item){
      this.$set(this,'cacheItem',
        Object.assign(
          {id:item.id},
          {
            nCompType: this.tabComp,
            nLibsType: this.tabLibs,
          }
        )
      );//选中时,缓存对象
    },//激活

  },
  mounted(){
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/config.less');
@import url('../../assets/style.less');
@import url('./materialLibrary.less');

.tabRow{
  margin:0 20px 15px 20px;
  border-bottom: 2px solid darken(#fff,20%) ;
}
.tabItem{
  position: relative;
  font-size: 14px;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  color: darken(#fff,20%);
  &.active{
    color: @blue;
    &::before{
      content: '';
      position: absolute;
      bottom:-2px;
      left:0;right:0;
      height:2px;
      background-color:@blue;
    }
  }
}

</style>